<template lang="html">
  <div id="charts">
    <input type="date" v-model="startdate" />至
    <input type="date" v-model="enddate" />
    <div id="CC" :style="{width:'100%',height:'100%'}">
    </div>
  </div>
</template>

<script>
  import * as Util from '../Util'
  import co from 'co'
  import echarts from 'echarts'
  import { HttpResetClass } from 'vue-client'

  let getData = function * (self) {
    let load = new HttpResetClass()
    load.load('POST','rs/sql/chargeGas',
      {data: {startDate: self.startdate, endDate: self.enddate}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        self.texttile = '汇总数'
       let arrparams = []
        for (var i = 0; i < res.data.length; i++) {
          arrparams[i] = res.data[i].name
        }
        console.log(arrparams,res.data)
        self.set(arrparams,res.data)
      })
  }
  export default {
    title: "汇总数",
    props: {
      startdate: {
        type: String,
        default: Util.toStandardDateString()
      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      }
    },
    data () {
      return {
        texttile: '',
        xc: ''
      }
    },
    methods: {
      set (arrparams,pricedata) {
        this.xc = echarts.init(document.getElementById('CC'))
        this.xc.setOption(
          {
            series: [
              {
                name: ' 销售额',
                type: 'pie',
                radius: ['25%', '30%'],
                center: ['30%', '30%'],
                startAngle: 225,
                color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00a2ff'
                }, {
                  offset: 1,
                  color: '#70ffac'
                }]), "transparent"],
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                label: {
                  normal: {
                    position: 'center'
                  }
                },
                data: [{
                  value: 75,
                  name: '销售金额',
                  label: {
                    normal: {
                      formatter: '销售金额',
                      textStyle: {
                        color: '#000',
                        fontSize: 16

                      }
                    }
                  }
                }, {
                  value: 25,
                  name: '%',
                  label: {
                    normal: {
                      formatter: '\n355256.22',
                      textStyle: {
                        color: '#007ac6',
                        fontSize: 30

                      }
                    }
                  }
                },
                  {
                    value: 0,
                    name: '%',
                    label: {
                      normal: {
                        formatter: '元',
                        textStyle: {
                          color: '#000',
                          fontSize: 16

                        }
                      }
                    }
                  }]
              },
              {
                name: ' 销售气量',
                type: 'pie',
                radius: ['25%', '30%'],
                center: ['70%', '30%'],
                startAngle: 225,
                color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00a2ff'
                }, {
                  offset: 1,
                  color: '#70ffac'
                }]), "transparent"],
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                label: {
                  normal: {
                    position: 'center'
                  }
                },
                data: [{
                  value: 75,
                  name: '销售气量',
                  label: {
                    normal: {
                      formatter: '销售气量',
                      textStyle: {
                        color: '#000',
                        fontSize: 16

                      }
                    }
                  }
                }, {
                  value: 25,
                  name: '%',
                  label: {
                    normal: {
                      formatter: '\n5562345',
                      textStyle: {
                        color: '#007ac6',
                        fontSize: 30

                      }
                    }
                  }
                },
                  {
                    value: 0,
                    name: '%',
                    label: {
                      normal: {
                        formatter: 'm²',
                        textStyle: {
                          color: '#000',
                          fontSize: 16

                        }
                      }
                    }
                  }]
              },
              {
                name: ' 总用户数',
                type: 'pie',
                radius: ['25%', '30%'],
                center: ['30%', '70%'],
                startAngle: 225,
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                label: {
                  normal: {
                    position: 'center'
                  }
                },
                data: [{
                  value: 75,
                  "itemStyle": {
                    "normal": {
                      "color": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        "offset": 0,
                        "color": '#f125ff'
                      }, {
                        "offset": 1,
                        "color": '#2dcbff'
                      }]),
                    }
                  },
                  name: '总用户数',
                  label: {
                    normal: {
                      formatter: '总用户数',
                      textStyle: {
                        color: '#000',
                        fontSize: 16

                      }
                    }
                  }
                }, {
                  value: 25,
                  name: '%',
                  label: {
                    normal: {
                      formatter: '\n156235',
                      textStyle: {
                        color: '#f125ff',
                        fontSize: 30

                      }
                    }
                  }
                },
                  {
                    value: 0,
                    name: '%',
                    label: {
                      normal: {
                        formatter: '户',
                        textStyle: {
                          color: '#000',
                          fontSize: 16

                        }
                      }
                    }
                  }]
              },
              {
                name: '同比销售对比',
                type: 'pie',
                radius: ['25%', '30%'],
                center: ['70%', '70%'],
                startAngle: 225,
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                label: {
                  normal: {
                    position: 'center'
                  }
                },
                data: [{
                  value: 75,
                  "itemStyle": {
                    "normal": {
                      "color": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        "offset": 0,
                        "color": '#f125ff'
                      }, {
                        "offset": 1,
                        "color": '#2dcbff'
                      }]),
                    }
                  },
                  name: '同比销售对比',
                  label: {
                    normal: {
                      formatter: '同比销售对比',
                      textStyle: {
                        color: '#000',
                        fontSize: 16

                      }
                    }
                  }
                }, {
                  value: 25,
                  name: '%',
                  label: {
                    normal: {
                      formatter: '\n+2.301',
                      textStyle: {
                        color: '#f125ff',
                        fontSize: 30

                      }
                    }
                  }
                },
                  {
                    value: 0,
                    name: '%',
                    label: {
                      normal: {
                        formatter: '%',
                        textStyle: {
                          color: '#000',
                          fontSize: 16

                        }
                      }
                    }
                  }]
              },
            ]
          })
      },
      searchdata () {
        let getGen =getData(this)
        co(getGen)
      }
    },
    ready () {
      this.searchdata()
    },
    watch: {
      'startdate' (val) {
        this.searchdata()
      },
      'enddate' (val) {
        this.searchdata()
      }
    }

  }
</script>
